<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册页</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./lib/vue/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/cookies.js"></script>
    <script type="text/javascript" src="./js/global.js"></script>
    <style>
        .login-main {
            width: 550px;
            margin: 30px auto 0;
        }
    </style>
</head>
<body>

<div class="login-main">
    <!-- 表单选项 -->
    <form class="layui-form  layui-form-pane">
        <div class="layui-form-item">
            <label for="companyName" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>公司名称
            </label>
            <div class="layui-input-inline" style="width: 400px;">
                <div class="layui-inline" style="width: 340px;">
                    <input type="text" id="companyName" name="companyName" required=""
                           lay-verify="companyName" placeholder="请输入公司名称"
                           autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="nri" style="color: green;font-weight: bolder;"
                       hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="nwr" style="color: red; font-weight: bolder;"
                       hidden>ဆ</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="sysName" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>系统名称
            </label>
            <div class="layui-input-inline" style="width: 400px;">
                <div class="layui-inline" style="width: 340px;">
                    <input type="text" id="sysName" name="sysName" required=""
                           lay-verify="sysName" placeholder="请输入系统名称"
                           autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="sri" style="color: green;font-weight: bolder;"
                       hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="swr" style="color: red; font-weight: bolder;"
                       hidden>ဆ</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="username" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>用户名
            </label>
            <div class="layui-input-inline" style="width: 400px;">
                <!-- 用户名 -->
                <div class="layui-inline" style="width: 340px;">
                    <input type="text" id="username" name="name" required lay-verify="required"
                           placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;"
                       hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;"
                       hidden>ဆ</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="telephone" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>联系方式
            </label>
            <div class="layui-input-inline" style="width: 400px;">
                <!-- 用户名 -->
                <div class="layui-inline" style="width: 340px;">
                    <input type="text" id="telephone" name="telephone" required lay-verify="required"
                           placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="tri" style="color: green;font-weight: bolder;"
                       hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="twr" style="color: red; font-weight: bolder;"
                       hidden>ဆ</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="pwd" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>密码
            </label>
            <div class="layui-input-inline" style="width: 400px;">
                <!-- 密码 -->
                <div class="layui-inline" style="width: 340px;">
                    <input type="password" id="pwd" name="password" required lay-verify="required"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;"
                       hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;"
                       hidden>ဆ</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="pwd" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>确认密码
            </label>
            <div class="layui-input-inline" style="width: 400px;">
                <!-- 确认密码 -->
                <div class="layui-inline" style="width: 340px;">
                    <input type="password" id="rpwd" name="rePassword" required
                           lay-verify="required"
                           placeholder="请确认密码" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;"
                       hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-inline">
                    <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;"
                       hidden>ဆ</i>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline login-btn" style="margin-left: 120px;">
                <button type="submit" lay-submit lay-filter="sub" class="layui-btn" style="width: 200px;">注册</button>
            </div>
        </div>
    </form>
</div>


<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        //添加表单失焦事件
        //验证表单
        $('#username').blur(function () {
            var username = $(this).val();
            if (!username || username.trim() === "") {
                $('#wr').removeAttr('hidden');
                $('#ri').attr('hidden', 'hidden');
                layer.msg('用户名不可为空! ')
            } else {
                $.post(_hostUrl + "/register/userName", {name: username}, function (res) {
                    if (!res.data) {
                        $('#wr').removeAttr('hidden');
                        $('#ri').attr('hidden', 'hidden');
                        layer.msg('用户名已被占用，请尝试在用户名前加上公司简称! ')
                    } else {
                        $('#ri').removeAttr('hidden');
                        $('#wr').attr('hidden', 'hidden');
                    }
                })
            }

        });
        $('#companyName').blur(function () {
            let companyName = $(this).val();
            if (!companyName || companyName.trim() === "") {
                $('#nwr').removeAttr('hidden');
                $('#nri').attr('hidden', 'hidden');
                layer.msg('企业名称不可为空! ')
            } else {
                $('#nri').removeAttr('hidden');
                $('#nwr').attr('hidden', 'hidden');
            }
        });
        $('#telephone').blur(function () {
            let telephone = $(this).val();
            if (!telephone || telephone.trim() === "") {
                $('#twr').removeAttr('hidden');
                $('#tri').attr('hidden', 'hidden');
                layer.msg('联系方式不可为空! ')
            } else {
                $('#tri').removeAttr('hidden');
                $('#twr').attr('hidden', 'hidden');
            }
        });
        $('#sysName').blur(function () {
            let companyName = $('#companyName').val();
            if (!companyName || companyName.trim() === "") {
                $(this).val("");
                layer.msg('请先输入公司名称! ')
            } else {
                var sysName = $(this).val();
                if (!sysName || sysName.trim() === "") {
                    $('#nwr').removeAttr('hidden');
                    $('#nri').attr('hidden', 'hidden');
                    layer.msg('系统名称不可为空! ')
                } else {
                    $.post(_hostUrl + "/register/sysName", {
                        companyName: companyName,
                        sysName: sysName
                    }, function (res) {
                        if (res.data) {
                            $('#swr').removeAttr('hidden');
                            $('#sri').attr('hidden', 'hidden');
                            layer.msg('该公司和系统名称已经注册，请联系系统负责人申请账户!')
                        } else {
                            $('#sri').removeAttr('hidden');
                            $('#swr').attr('hidden', 'hidden');
                        }
                    })
                }
            }
        });
        // 为密码添加正则验证
        $('#pwd').blur(function () {
            var reg = /^[\w]{6,20}$/;
            if (!($('#pwd').val().match(reg))) {
                //layer.msg('请输入合法密码');
                $('#pwr').removeAttr('hidden');
                $('#pri').attr('hidden', 'hidden');
                layer.msg('请输入合法密码，6-20位');
            } else {
                $('#pri').removeAttr('hidden');
                $('#pwr').attr('hidden', 'hidden');
            }
        });

        //验证两次密码是否一致
        $('#rpwd').blur(function () {
            if ($('#pwd').val() != $('#rpwd').val()) {
                $('#rpwr').removeAttr('hidden');
                $('#rpri').attr('hidden', 'hidden');
                layer.msg('两次输入密码不一致!');
            } else {
                $('#rpri').removeAttr('hidden');
                $('#rpwr').attr('hidden', 'hidden');
            }
            ;
        });

        //
        //添加表单监听事件,提交注册信息
        form.on('submit(sub)', function (data) {
            $.post(_hostUrl + '/user/register', {
                name: $('#username').val()
                , password: $('#pwd').val()
                , rePassword:$('#rpwd').val()
                , companyName: $('#companyName').val()
                , sysName: $('#sysName').val()
                ,telephone:$('#telephone').val()
            }, function (res) {
                if (res.responseCode != 201) {
                    layer.msg(res.msg, {time: 2000});
                    return
                }
                layer.msg('注册成功，请登录!', {icon: 1}, function () {
                    var index = parent.layer.getFrameIndex(window.name)
                    //关闭当前frame
                    parent.layer.close(index)
                });
            }, 'json');
            return false;
        });
    });
</script>
</body>
</html>